<!-- 我的团队主页 -->
<!-- 团队主页------------------- -->
<template>
	<image v-if="!teamInfo._id" src="/static/u3462.svg" mode=""></image>
	<view v-else class="institution-container">
		<!-- 团队头部信息 -->
		<view class="header">
			<image class="institution-icon" :src="teamInfo.avatar">
			</image>
			<view class="info-wrap">
				<view class="name">
					{{teamInfo.name}}
				</view>
				<!-- 	<navigator url="/homepackge/pages/organizations/organizations"> -->
				<view class="address">
					所属机构：{{teamInfo.organizationId?.name}}
				</view>
				<!-- 		</navigator> -->
				<view class="number">
					签约人数：<span style="color: #2984F8;">{{teamInfo.doctorId?.signNumber}}</span>
				</view>
				<rate-star :rating="teamInfo.rate"></rate-star>
				<view class="contact">
					星星
				</view>
			</view>
		</view>
		<view class="cardone-middle">
			<text class="service-tag" style="background-color: #3DD4A733;color: #3DD4A7;">慢病管理</text>
			<text class="service-tag" style="background-color: #6c76F433;color: #6c76F4;">中医服务</text>
			<text class="service-tag" style="background-color: #FA746B33;color: #FA746B;">老年人管理</text>
		</view>
		<!-- 我的团队主页---------------------- -->
		<mineTeamdaoctor></mineTeamdaoctor>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from "vue";
	import {
		useUserStore
	} from "../../../store/user";
	// 组件引入
	import mineTeamdaoctor from "../../components/mine-teamdaoctor/mine-teamdaoctor.vue"
	import {
		useContractStore
	} from "../../../store/contract";
	import {
		storeToRefs
	} from 'pinia';
	import {
		getSignsSearchApi
	} from "../../../api/mine-doctorTeam";
	// 获取用户状态机
	const userStore = useUserStore();
	//获取签约状态机
	const contractStore = useContractStore();
	//在状态机上拿数据----------
	//this.contractDetail = res.data;
	// this.userInfo = res.data.residentId || null;
	// const {
	// 	userInfo
	// } = storeToRefs(userStore);
	// const {
	// 	contractDetail
	// } = storeRefs(contractStore);
	//团队信息
	const teamInfo = ref({
		_id: '',
		avatar: ''
		name: '',
		rate: ''

	})
	//如果没有用户信息，先去获取用户信息
	// async
	onMounted(() => {
		console.log('999', contractStore.contractDetail);
		// if (!userInfo.value) {
		// 	await userInfo.getUserInfoAction();
		// }
		//获取签约信息
		// await contractStore.getContractDetailAction();
		if (contractStore.contractDetail?.teamId) {
			// 数据渲染
			teamInfo.value = contractStore.contractDetail.teamId;
		}
		// else if (userInfo.value?.teamId) {
		// 	const res = await getSignsSearchApi({
		// 		_id: userInfo.value.teamId
		// 	});
		// 	if (res.code === 200) {
		// 		teamInfo.value = res.data || res.data.rows;
		// 	}
		// }

	})
</script>
<style scoped>
	/* 整体容器 */
	.institution-container {
		padding: 30rpx;
		background-color: #fff;
	}

	.header {
		display: flex;
		margin-bottom: 30rpx;
	}

	.institution-icon {
		width: 240rpx;
		height: 240rpx;
		margin-right: 24rpx;
		border-radius: 16rpx;
		border: 1px solid #E6F2FF;
	}

	.info-wrap {
		flex: 1;
	}

	.name {
		font-size: 32rpx;
		line-height: 44rpx;
		color: #333;
		margin-bottom: 12rpx;
	}

	.address {
		display: flex;
		align-items: center;
		font-size: 20rpx;
		color: #999999;
		line-height: 54rpx;
		margin-bottom: 16rpx;
	}

	.number {
		font-size: 24rpx;
		color: #999999;
		line-height: 54rpx;
		margin-bottom: 16rpx;
	}


	.contact {
		display: flex;
		gap: 16rpx;
	}

	/* 标签 */
	.cardone-middle {
		display: flex;
		gap: 16rpx;
		padding: 20rpx 0;
	}

	.service-tag {
		padding: 12rpx 0;
		border-radius: 8rpx;
		/* 		color: #fff; */
		font-size: 28rpx;
		line-height: 40rpx;
		margin-right: 20rpx;
	}
</style>